import Image from "next/image";
import styles from "./single.module.css";
import fetch from "node-fetch";
import PostUser from "@/components/postUser";
import { Suspense } from "react";
import { getPost } from "@/lib/data";

const getData = async (id) => {
  console.log(id, "---");

  // const res = await fetch("https://jsonplaceholder.typicode.com/posts/" + id);
  const res = await fetch("http://localhost:3000/api/blog/" + id, {
    // method: 'DELETE'
  });
  if (!res.ok) throw new Error("Something went wrong");
  return res.json();
};

export const generateMetadata = async ({ params }) => {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.body,
  };
};

const SinglePost = async ({ params, searchParams }) => {
  const post = await getData(params.slug);
  // const post = await getPost(params.slug);
  return (
    <div className={styles.container}>
      <div className={styles.imgContainer}>
        <Image alt="post" src="/about.png" fill className={styles.img} />
      </div>
      <div className={styles.textContainer}>
        <h2 className={styles.title}>{post.title}</h2>
        <div className={styles.detail}>
          <Image alt="post" src="/about.png" fill className={styles.avatar} />
        </div>
        <div className={styles.user}>
          <Suspense fallback={<div>Loading...</div>}>
            <PostUser post={post} />
          </Suspense>
        </div>
        <p>{post.body}</p>
      </div>
    </div>
  );
};
export default SinglePost;
